<script setup>
const props = defineProps({
  text: {
    type: String,
    required: true,
  },
  fontSize: {
    type: String,
    default: '24rpx',
  },
  isBold: {
    type: Boolean,
    default: false
  },
  paddingTB: {
    type: String,
    default: '10rpx'
  },
  paddingLR: {
    type: String,
    default: '15rpx'
  },
  width: {
    type: String,
    default: '100%'
  },
  plain: {
    type: Boolean,
    default: false
  }
})
</script>

<template>
  <view :class="[plain ? 'plain-btn' : 'primary-btn']">
    <text
      :style="{
        width,
        fontSize,
        paddingTop: paddingTB,
        paddingBottom: paddingTB,
        paddingLeft: paddingLR,
        paddingRight: paddingLR,
        fontWeight: isBold ? 'bold' : 'normal'
    }">
      {{ text }}
    </text>
  </view>
</template>


<style scoped lang="scss">
.plain-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a1617;
  border-radius: 50rpx;
  border: 4rpx solid #1a1617;
  text-align: center;
  

  &:active {
    color: #fff;
    background-color: #1a1617;
  }
}
</style>
